<style>
  #container {
    width: var(--cr-toolbar-field-width);
  }

  #title {
    align-items: center;
    color: var(--cros-text-color-primary);
    display: flex;
    font: var(--cros-body-2-font);
    font-weight: bold;
    height: 48px;
  }

  accelerator-row:not(:last-of-type) {
    border-bottom: var(--cr-separator-line);
  }

  #rowList {
    display: flex;
    flex-direction: column;
  }
</style>

<div id="container" part="container">
  <div id="title">[[title]]</div>
  <div id="rowList">
    <template id="list" is="dom-repeat" items="[[accelRowDataArray]]">
      <accelerator-row
          accelerator-infos="[[getSortedAccelerators(item.acceleratorInfos)]]"
          action="[[item.layoutInfo.action]]"
          description="[[item.layoutInfo.description]]"
          layout-style="[[item.layoutInfo.style]]"
          source="[[item.layoutInfo.source]]">
      </accelerator-row>
    </template>
  </div>
</div>